<template>
   <!-- <div v-html="">
   </div> -->
   <div class="paper_context">
      <!-- <v-md-editor v-model="text" height="400px"></v-md-editor> -->
      <!-- <v-md-preview-html :html="text1" preview-class="vuepress-markdown-body">
      </v-md-preview-html> -->
      <v-md-preview :text="data.context" :include-level="[3, 4]"></v-md-preview>
      <!-- <v-md-editor v-model="text1" height="400px"></v-md-editor> -->
   </div>
</template>

<!-- 读 markdown 文件 https://code-farmer-i.github.io/vue-markdown-editor/zh/ -->

<script lang="ts">
import 'github-markdown-css'
import { defineComponent, reactive, ref, toRefs, onMounted, onUpdated } from "vue";
import axios from '../../request';

export default defineComponent({
   name: "md-view",
   props: {
      md: Object as () => string
   },

   setup(props) {
      const data = reactive({
         context: ''
      });

      const el = ref()

      onMounted(() => {
      el.value // <div>
      })

      onUpdated(() => {
         // 文本内容应该与当前的 `count.value` 一致
         const mdurl = props.md == undefined?'':props.md;
         const parms = axios.getStream<string>(mdurl);
         parms.then((res)=>{
            const str: string = res.toString();
            data.context = str;
            // text.value = str;
         });
      })

      // let text = ref(''); 
      // const parms = axios.getStream<string>("/md/a.md");
      const parms = axios.getStream<string>("/md/jvm/section1.md");
      parms.then((res)=>{
         const str: string = res.toString();
         data.context = str;
         // text.value = str;
      });
      return {
         data,
         // text,
      };
   }
})
// Sass和Less的区别和使用
</script>

<style lang="less">
.paper_context{
   text-align: initial;
   background-color: #d9ecff;
}

</style>